import { useQuery } from '@umijs/max';
import { useEffect, useRef, useState } from 'react';
// antd
import { Image } from 'antd';
import 'antd/dist/reset.css';
// 公共函数
import '@/utils/adapter.min.js';
import { addCommas } from '@/utils/index';

import { MenuList } from '@/components/MenuList/menuList';
// 公共图表组件
import { BarChartBaseValue } from '@/components/Echarts/BarChartBaseValue';
import { PieChartProportion } from '@/components/Echarts/PieChartProportion';
// 页面图表组件
import { LineChart } from '../DataBoardTwo/components/lineChart'; // 折线 双坐标
import { BarChart } from './components/barChart'; // 双柱 折柱混合图 双坐标
import { LineChart as LineChartTemp } from './components/lineChartTemp';
// 图片 ｜ 视频
import BgLunLeftB2 from '@/assets/images/bg-lun-left-b2.png';
import BgLunRightB2 from '@/assets/images/bg-lun-right-b2.png';
import InfiniteScroll from "./components/InfiniteScroll"

// 接口地址
import {
  ApiUrl,
  getBleedingTemperatureMonitor,
  getPHMonitor,
  getTempTemperatureMonitor,
  getPassRateTrend,
  getIceMachineMonitor,
  getBizAlarm,
  getSeparatorMonitor,
  getKwhMonitor
} from '@/services/data-board/boardOne';
import { ApiUrlTwo } from '@/services/data-board/boardTwo';
// 接口
import {
  averageDaySupply,
  getFishTypeProportion,
  getIpList,
  getRawMaterialFish,
  getRawMaterialFishTopFive,
} from '@/services/data-board/boardOne';

// ts
import type {
  LineMonitorType,
  TopFiveType,
  TrendType,
  proporDataType,
  
} from '@/components/Echarts/typing';
import type { GetRawMaterialFishTopFiveType,GetPassRateTrendType } from '@/services/data-board/typing';
import type { AverType, BleedType, RawFishSupplyType,messageType } from './typing';

import {
  inStockTrend,
  outStockTrend,
  stockTrend,
} from '@/services/data-board/boardTwo';
import type { OutInStockBarType } from '../DataBoardTwo/typing';

import centerImage from '@/assets/images/centerImage.png';
import { LineChartBaseValue } from '@/components/Echarts/LineChartBaseValue';


// 声明 webRtcServer 并指定其类型
// let webRtcServer: InstanceType<typeof WebRtcStreamer> | null = null;

export default function DataBoardOne() {
  // 获取视频ip地址
  // const { data: ipData, isSuccess: ipIsSuccess } = useQuery({
  //   queryKey: ['getIpList'],
  //   queryFn: () => getIpList({ type: 1 }),
  //   refetchInterval: false,
  // });
  // console.log('ipIsSuccess', ipIsSuccess);

  // }

  // 图1 数据 -----
  let rawFishSupplyData: RawFishSupplyType.StateType = {
    xAxisData: [],
    seriesData: [],
  };
  // const [data, setData] = useState([]);
  // 图1 原料鱼供应量
  const { data: rawFishData, isSuccess: rawFishIsSuccess } = useQuery({
    queryKey: [ApiUrl.GETRAWMATERIALFISH],
    queryFn: () => getRawMaterialFish({}),
  });

  if (rawFishIsSuccess) {
    const { resultData } = rawFishData;
    console.log(rawFishData,'原料鱼供应量')
    rawFishSupplyData = {
      xAxisData: resultData[0].value.map((item) => item.date.replace(/-/g, "")) ?? [],
      seriesData: resultData.map((el) => ({
        name: el.name,
        data: el.value.map((item) => item.value/1000),
      })),
    };
    // 统计每个日期的累计值
const dateSumMap = new Map();

resultData.forEach((product) => {
  product.value.forEach((entry) => {
    const { date, value } = entry;
    if (dateSumMap.has(date)) {
      dateSumMap.set(date, dateSumMap.get(date) + value/1000); // 累加值
    } else {
      dateSumMap.set(date, value/1000); // 初始化值
    }
  });
});

// 将结果转换为数组格式
const result = Array.from(dateSumMap).map(([date, value]) => (value));
rawFishSupplyData.seriesData.unshift({
  name:'总供应量',
  data:result,
})


  }

  //合格率
  let passRateTrendData: TrendType.StateType = {
    xAxisData: [],
    seriesData: [],
  };
  // 图4 合格率趋势
  const { data: passRateData, isSuccess: passRateIsSuccess } = useQuery({
    queryKey: [ApiUrl.GETPASSRATETREND],
    queryFn: () => getPassRateTrend({}),
  });

  if (passRateIsSuccess) {
    const resultData =
      passRateData?.resultData as GetPassRateTrendType.Response;
    const { lowerLimit = [], reality = [] } = resultData;
    console.log('合格率', resultData);
    passRateTrendData = {
      xAxisData: lowerLimit.map((item) => item.date.replace(/-/g, "")) ?? [],
      seriesData: [
        lowerLimit.map((item) => item.value) ?? [],
        reality.map((item) => item.value) ?? [],
      ],
    };
  }
  // 图2 w温度
  let bleedData: BleedType.StateType = {
    xAxisData: [],
    seriesData1: [],
    seriesData2: [],
  };
  // 图2-1 放血池温度监控
  const { data: bleedingData, isSuccess: bleedingIsSuccess } = useQuery({
    queryKey: [ApiUrl.GETBLEEDINGTEMPERATUREMONITOR],
    queryFn: () => getBleedingTemperatureMonitor({}),
  });

  if (bleedingIsSuccess) {
    const { resultData } = bleedingData;
    // console.log(bleedingData,'放血池温度监控')
    bleedData.xAxisData = resultData[0].value.map((item) => item.time) ?? [];
    bleedData.seriesData1 = resultData.map((el) => ({
      name: el.name,
      data: el.value.map((item) => item.value),
    }));
  }
  // 图2-2 暂养池温度监控
  const { data: tempData, isSuccess: tempIsSuccess } = useQuery({
    queryKey: [ApiUrl.GETTEMPTEMPERATUREMONITOR],
    queryFn: () => getTempTemperatureMonitor({}),
  });

  if (tempIsSuccess) {
    // console.log('tempData', tempData, temData);
   
    const { resultData } = tempData;
    bleedData.seriesData2 = resultData.map((el) => ({
      name: el.name,
      data: el.value.map((item) => item.value),
    }));
    console.log(bleedData,'温度')
  }

  // 图3 ph数据
  let phMonData: LineMonitorType.StateType = {
    xAxisData: [],
    seriesData: [],
  };
  // 图3 放血池PH值监控
  const { data: phMonitorData, isSuccess: phMonitorIsSuccess } = useQuery({
    queryKey: [ApiUrl.GETPHMONITOR],
    queryFn: () => getPHMonitor({}),
  });

  if (phMonitorIsSuccess) {
    const { resultData } = phMonitorData;
    console.log(phMonitorData,' ph数据')
    phMonData = {
      xAxisData: resultData[0].value.map((item) => item.time) ?? [],
      seriesData: resultData.map((el) => ({
        name: el.name,
        data: el.value.map((item) => item.value),
      })),
    };
  }



  // 图5 加工鱼类占比
  let proporData: proporDataType.StateType = {
    seriesData: [],
  };
  // const [proporData, setProporData] = useState({});
  // 图5 加工鱼类占比
  const { data: proportionData, isSuccess: proportionIsSuccess } = useQuery({
    queryKey: [ApiUrl.GETFISHTYPEPROPORTION],
    queryFn: () => getFishTypeProportion({}),
  });

  if (proportionIsSuccess) {
    const { resultData } = proportionData;
    
    // setProporData({
    //   seriesData: resultData[0].data,
    // })
    console.log(proportionData,'加工鱼类占比')
    proporData = {
      seriesData: resultData[0].data,
    };
  }

  // // 图6 数据
  // let fishTopData: TopFiveType.StateType = {
  //   xAxisData: [],
  //   seriesData: [],
  // };
  // // 图6 原料鱼累计供应Top5
  // const { data: fishTop5Data, isSuccess: fishTop5IsSuccess } = useQuery({
  //   queryKey: [ApiUrl.GETRAWMATERIALFISHTOPFIVE],
  //   queryFn: () => getRawMaterialFishTopFive({}),
  // });

  // if (fishTop5IsSuccess) {
  //   const { resultData } = fishTop5Data;
  //   let newResultData: GetRawMaterialFishTopFiveType.Value[] = [];
  //   resultData.forEach((el) => {
  //     newResultData.push({
  //       name: el.name,
  //       value: el.value.reduce((total, curr) => total + +curr.value, 0),
  //     });
  //   });
  //   // 辅助背景值
  //   const fData: number[] = [];
  //   const maxVal = newResultData.reduce((total, cur) => total + +cur.value, 0);
  //   newResultData.forEach(() => {
  //     fData.push(maxVal);
  //   });
  //   fishTopData = {
  //     xAxisData:
  //       newResultData
  //         .map((item, index) => `TOP${index + 1} ${item.name}`)
  //         .reverse() ?? [],
  //     seriesData: [
  //       newResultData.map((el) => el.value).reverse(),
  //       fData.reverse(),
  //     ],
  //   };
  // }

  // 鱼塘信息
  const { data: averageData, isSuccess: averageIsSuccess } = useQuery({
    queryKey: [ApiUrl.AVERAGEDAYSUPPLY],
    queryFn: () => averageDaySupply({}),
  });
  let averData = averageData?.resultData as AverType.data[];

  // ---------------看板2图表--分割线-----看板2
  // // 图1 数据
  // let stockTrendBarData: TrendType.StateType = {
  //   xAxisData: [],
  //   seriesData: [],
  // };
  // // 图1 库存数量趋势
  // const { data: stockTrendData, isSuccess: stockTrendIsSuccess } = useQuery({
  //   queryKey: [ApiUrlTwo.STOCKTREND],
  //   queryFn: () => stockTrend({}),
  // });

  // if (stockTrendIsSuccess) {
  //   const { resultData } = stockTrendData;
  //   stockTrendBarData = {
  //     xAxisData: resultData[0].value.map((item) => item.time) ?? [],
  //     seriesData: [
  //       [], // 未返回基准值，要不要？
  //       resultData[0].value.map((item) => item.value) ?? [],
  //     ],
  //   };
  // }

  // // 图2 数据
  // let outInStockBarData: OutInStockBarType.StateType = {
  //   xAxisData: [],
  //   seriesData: [],
  // };
  // // 图2-1 出库数量趋势
  // const { data: outStockTrendData, isSuccess: outStockTrendIsSuccess } =
  //   useQuery({
  //     queryKey: [ApiUrlTwo.OUTSTOCKTREND],
  //     queryFn: () => outStockTrend({}),
  //   });

  // if (outStockTrendIsSuccess) {
  //   const { resultData } = outStockTrendData;
  //   outInStockBarData = {
  //     xAxisData: resultData[0].value.map((item) => item.time) ?? [],
  //     seriesData: [resultData[0].value.map((item) => item.value)],
  //   };
  // }
  // // 图2-2 入库数量趋势
  // const { data: inStockTrendData, isSuccess: inStockTrendIsSuccess } = useQuery(
  //   {
  //     queryKey: [ApiUrlTwo.INSTOCKTREND],
  //     queryFn: () => inStockTrend({}),
  //   },
  // );

  // if (inStockTrendIsSuccess) {
  //   const { resultData } = inStockTrendData;
  //   outInStockBarData.seriesData.push(
  //     resultData[0].value.map((item) => item.value),
  //   );
  // }
  // const scrollRefs = useRef<HTMLDivElement>(null);
  // const [isPauseds, setIsPauseds] = useState(false);
   
  // useEffect(() => {
  //   if (!isPauseds && scrollRefs.current) {
  //     const scrollIntervals = setInterval(() => {
  //       if (scrollRefs.current) {
  //         const scrollHeight = scrollRefs.current.scrollHeight;
  //         const clientHeight = scrollRefs.current.clientHeight;
  //         scrollRefs.current.scrollTop=5.9+0.2;
  //         console.log(scrollRefs.current.scrollTop)
  //         console.log(scrollHeight - clientHeight)
  //         if (scrollRefs.current.scrollTop >= scrollHeight - clientHeight) {
  //           scrollRefs.current.scrollTop = 0;
  //         }
          
  //         // scrollRefs.current.scrollTop = newScrollTop;
  //       }
  //     }, 50);

  //     return () => clearInterval(scrollIntervals);
  //   }
  // }, [isPauseds]);
 
    // 制冰机
    let outInStockBarData:any ={}
    let outInStockBarDatas:any = {}
    let outInStockBarList:any = {}
    let outInStockBarLists:any = {}
   
    const { data: IceMachineMonitorData, isSuccess: IceMachineMonitorIsSuccess } = useQuery({
      queryKey: [ApiUrl.IceMachineMonitor],
      queryFn: () => getIceMachineMonitor({}),
    });
  
    if (IceMachineMonitorIsSuccess) {
      console.log(IceMachineMonitorData,'制冰机')
      let list:any=[]
      list = IceMachineMonitorData?.resultData 
      list.forEach((item:any)=>{
        if(item.value.length==0) return
        if(item.value[0].value){
          let data = JSON.parse(item.value[0].value?.v1)
          
        if(item.name=='管冰机'){
          outInStockBarData = data
          outInStockBarList = {
            time:item.value[0].time,
            alarmInfo:item.value[0].value?.alarmInfo,
            equSwitch:item.value[0].value?.equSwitch,
            workingMode:item.value[0].value?.workingMode,
          }
        }else{
          outInStockBarDatas = data
          outInStockBarLists = {
            time:item.value[0].time,
            alarmInfo:item.value[0].value?.alarmInfo,
            equSwitch:item.value[0].value?.equSwitch,
            workingMode:item.value[0].value?.workingMode,
          }
        }
        }
        
        
        // console.log(data,'data')
        // console.log(outInStockBarDatas,'outInStockBarDatas')
        // console.log(outInStockBarData,'outInStockBarData')
      })

    }
    const [messages, setMessages] = useState([]);
    // 报警
    const { data: BizAlarmData, isSuccess: BizAlarmIsSuccess } = useQuery({
      queryKey: [ApiUrl.BizAlarm],
      queryFn: () => getBizAlarm({}),
    });
    // let averDatas = BizAlarmData?.resultData as messageType.data[];
    let averDatas:any = []
    if (BizAlarmIsSuccess) {
      console.log(BizAlarmData,'报警')
      // averDatas = [1,2,3,4,5,6,7,8,9,10] 
      averDatas = BizAlarmData?.resultData 
      // setMessages([...messages,BizAlarmData.resultData])
     
    }
    // let separatorMonitor:any = []
    // 分选机
    const { data: SeparatorMonitorData, isSuccess: SeparatorMonitorIsSuccess } = useQuery({
      queryKey: [ApiUrl.SeparatorMonitor],
      queryFn: () => getSeparatorMonitor({}),
    });
    let separatorMonitor:any = []
    if (SeparatorMonitorIsSuccess) {
      console.log(SeparatorMonitorData,'分选机')
      separatorMonitor = SeparatorMonitorData?.resultData
     
    }
     // 电量
    //  const { data: KwhMonitorData, isSuccess: KwhMonitorIsSuccess } = useQuery({
    //   queryKey: [ApiUrl.KwhMonitor],
    //   queryFn: () => getKwhMonitor({}),
    // });
  
    // if (KwhMonitorIsSuccess) {
    //   console.log(KwhMonitorData,'KwhMonitorData')
     
    // }
    const [activeTab, setActiveTab] = useState(0); // 当前选中的选项卡索引
    const tabs = ["1", "2"]; // 选项卡标题
    // 自动切换逻辑
  useEffect(() => {
    const interval = setInterval(() => {
      setActiveTab((prevTab) => (prevTab + 1) % tabs.length); // 切换到下一个选项卡
    }, 20000); // 每 3 秒切换一次

    return () => clearInterval(interval); // 组件卸载时清除定时器
  }, []);
  const tabContents = [
   {
    title:'集元水产',
    headers:'公司简介',
    src:BgLunLeftB2,
    content:'珠海市农业龙头企业，广东省高新技术企业，并取得多项成果专利。公司一直以来专注于水产品养殖、加工、市场开发营销；并在水质治理、生物技术开发运用，健康养殖技术推广、土壤修复等领域开拓发展。现在＂鲜城故事”品牌系列水产品已经在全国各地布局强大的销售网络，产品质量深受广大消费者的赞誉和信赖，并得到中央电视台财经频道和广东卫视的多次专题采访报道。公司产品在2018年、2019年连续获得广东省名牌产品，2020年广东省“粤字号”入库品牌，广东省十强鲜活水产经营企业，最受欢迎的渔业食材供应商，珠海首届十大品牌农产品，2019最具品牌影响力奖，2019年2020年连续获得最佳产品奖。公司是“连续多年广东省守合同重信用企业”，在全国享有较高的声誉，是珠海地区最大的水产品及海鲈鱼加工企业之一。'
   },
   {
    title:'格力预制菜装备',
    headers:'格力预制菜装备',
    src:BgLunRightB2,
    content:'2022年，格力电器牵头成立广东省预制菜装备产业发展联合会，目前会员单位已有40余家。广东省预制菜装备产业发展联合会以“成为全球领先的预制菜装备产业发展促进组织”为愿景，秉持着“开放、多元、融合、共赢、创新、发展”的价值观，坚持自主创新，绿色发展通过信息共享、技术共享、资源共享，实现产业优势互补，打造具有核心竞争力的预制菜装备产业集群，带动传统农业工业化升级，促进乡村经济兴，满足人民群众对美好生活的向往。'
   },
  ]; // 选项卡内容

// 表格无缝滚动



  return (
    <div className="main-wrapper">
      
      {/* ---------- 左 ---------- */}
      <div className="main main-left">
        {/* box */}
        <div className="main-box">
          <div className="main-box-header">
            <div className="header-font">原料鱼供应量</div>
          </div>
          <div className="main-box-contain">
            {/* chart */}
            <BarChart rawFishSupplyData={rawFishSupplyData} />
          </div>
        </div>
        {/* box */}
        {/* <div className="main-box">
          <div className="main-box-header">
            <div className="header-font">合格率趋势</div>
           
          <div className="main-box-contain">
      
            <BarChartBaseValue trendData={passRateTrendData} />
          </div>
        </div> */}

        {/* box */}
        {/* <div className="main-box">
          <div className="main-box-header">
            <div className="header-font">原料鱼累计供应TOP5</div>
          </div>
          <div className="main-box-contain">
            <BarChartTopFive TopFiveData={fishTopData} />
          </div>
        </div> */}

        <div className="main-box">
          <div className="main-box-header">

            <div className="header-font">温度监控</div>
            {/* <CustomDatePicker picker="date"></CustomDatePicker> */}
          </div>
          <div className="main-box-contain">
            {/* chart */}
            <LineChartTemp bleedData={bleedData} />
          </div>
        </div>
        {/* box */}
        <div className="main-box" style={{height:'29%'}}>
          <div className="main-box-header">
            <div className="header-font">PH值监控</div>
            {/* <CustomDatePicker picker="date"></CustomDatePicker> */}
          </div>
          <div className="main-box-contain"  style={{height:'100%'}}>
            {/* chart */}
            <LineChartBaseValue monitorData={phMonData} />
          </div>
        </div>
      </div>
      {/* ---------- 中 ---------- */}
      <div className="main main-center">
        {/* <div className='main-box'></div> */}
        {/* 菜单 */}
        <div className="main-center-menu">
          {averageIsSuccess ? (
            <MenuList
              list={[
                {
                  name: `${averData[averData.length-1].name}`,
                  num: addCommas(averData[averData.length-1].value),
                  unit: '个',
                },
                {
                  name: `${averData[0].name}日均供应`,
                  num: addCommas(averData[0].value),
                  unit: '千克',
                },
                {
                  name: `${averData[1].name}日均供应`,
                  num: addCommas(averData[1].value),
                  unit: '千克',
                },
                {
                  name: `${averData[2].name}日均供应`,
                  num: addCommas(averData[2].value),
                  unit: '千克',
                },
                
              ]}
            />
          ) : null}
        </div>

        {/* 视频 */}
        <div className="main-center-video">
          
          <Image src={centerImage}></Image>
        </div>

        {/* 走马灯 */}
        <div className="main-center-lunbo">
          {/* autoplay 30s */}
          {/* <Carousel dots > */}
            <div className="slide">
              <div className="slide-left">
                <div className={activeTab==0?'slide-left-img-box':'slide-left-img-box1'}>
                  <img
                    
                    className={activeTab==0?'slide-left-img':'slide-left-img1'}
                    src={tabContents[activeTab].src}
                  ></img>
                </div>
                <div className={activeTab==0?'slide-left-font-box':'slide-left-font-box1'}>{tabContents[activeTab].title}</div>
              </div>
              <div className="sldie-right">
                <h5>{tabContents[activeTab].headers}</h5>
                <p style={{textAlign:'justify'}}>
                {tabContents[activeTab].content}
                </p>
               
              </div>
            </div>
            {/* <div className="slide">
              <div className="slide-left">
                <div className="slide-left-img-box">
                  <Image
                    preview={false}
                    className="slide-left-img"
                    src={tabContents[0].src}
                  ></Image>
                </div>
                <div className="slide-left-font-box">{tabContents[0].title}</div>
              </div>
              <div className="sldie-right">
                <h5>{tabContents[0].headers}</h5>
                <p>
                {tabContents[0].content}
                </p>
                
              </div>
            </div> */}
            {/* <div className="slide">
              <div className="slide-left">
                <div className="slide-left-img-box1">
                  <Image
                    preview={false}
                    className="slide-left-img1"
                    src={tabContents[1].src}
                  ></Image>
                </div>
                <div className="slide-left-font-box1">{tabContents[1].title}</div>
              </div>
              <div className="sldie-right">
                <h5>{tabContents[1].headers}</h5>
                <p>
                {tabContents[1].content}
                </p>
              </div>
            </div> */}
          {/* </Carousel> */}
        </div>
        {/* 电量监控 */}
        <div className="main-box" style={{marginTop: '0.1rem'}}>
          <div className="main-box-header1">
            <div className="header-font">制冰机</div>
          </div>
          <div className="main-box-contain" style={{display:'flex',color:'#96A9BA',fontSize:'0.14rem',padding:' 0.12rem 0.35rem',justifyContent: 'space-between'}}>
            <div>
              <span style={{fontSize:'0.18rem',fontWeight:'900'}}>管冰机</span>
            
              <div style={{display:'flex',marginTop: '0.04rem'}}>
              <div style={{marginRight: '0.3rem'}}>
              <div style={{display:'flex',padding:'0.1rem 0',justifyContent: 'flex-end'}}>运行/停止{outInStockBarList.equSwitch==1?'（运行）':'（停止）'}
                  <div style={{display:'flex',marginLeft: '0.1rem'}}>
                    <div  className={outInStockBarList.equSwitch==1?'greenR':(outInStockBarList.equSwitch==0?'redR':'grayR')}>
                      <div className={outInStockBarList.equSwitch==1?'greenRN':(outInStockBarList.equSwitch==0?'redRN':'grayRN')}></div>
                    </div>
                    
                    
                  </div>
                  
                </div>

                <div style={{display:'flex',padding:'0.1rem 0',justifyContent: 'flex-end'}}>系统正常 
                  <div style={{display:'flex',marginLeft: '0.1rem'}}>
                    <div  className={outInStockBarList.workingMode==1?'greenR':'graysR'}>
                      <div className={outInStockBarList.workingMode==1?'greenRN':'graysRN'}></div>
                    </div>
                    
                  </div>
                </div>
                
                <div style={{display:'flex',padding:'0.1rem 0',justifyContent: 'flex-end'}}>系统故障 
                  <div style={{display:'flex',marginLeft: '0.1rem'}}>
                    <div  className={outInStockBarList.alarmInfo?'graysR':'yellowR'}>
                      <div className={outInStockBarList.alarmInfo?'graysRN':'yellowRN'}></div>
                    </div>
                    
                  </div>
                  
                </div>
                <div style={{display:'flex',padding:'0.1rem 0',justifyContent: 'flex-end'}}>系统电源故障 
                  <div style={{display:'flex',marginLeft: '0.1rem'}}>
                  <div  className={outInStockBarData.powerStatus?'yellowR':'graysR'}><div className={outInStockBarData.powerStatus?'yellowRN':'graysRN'}></div></div>
                  
                  </div>
                </div>

                
                

                {/* <div style={{display:'flex',padding:'0.1rem 0',justifyContent: 'flex-end'}}>冰库冰满 
                  <div style={{display:'flex'}}>
                    <div  className={outInStockBarData.iceFull?'greenR':'graysR'}>
                      <div className={outInStockBarData.iceFull?'greenRN':'graysRN'}></div>
                    </div>
                    
                  </div>
                </div> */}
              </div>
              <div>
                <div style={{display:'flex',padding:'0.1rem 0',justifyContent: 'flex-end'}}>压缩机内部过热 
                  <div style={{display:'flex',marginLeft: '0.1rem'}}>
                    <div  className={outInStockBarData.compressorIn?'yellowR':'graysR'}>
                      <div className={outInStockBarData.compressorIn?'yellowRN':'graysRN'}></div>
                    </div>
                    
                  </div>
                </div>

                <div style={{display:'flex',padding:'0.1rem 0',justifyContent: 'flex-end'}}>压缩机电流过载 
                  <div style={{display:'flex',marginLeft: '0.1rem'}}>
                    <div  className={outInStockBarData.compressorAC==1?'yellowR':'graysR'}>
                      <div className={outInStockBarData.compressorAC==1?'yellowRN':'graysRN'}></div>
                    </div>
                    
                  </div>
                  
                </div>

                <div style={{display:'flex',padding:'0.1rem 0',justifyContent: 'flex-end'}}>减速机电流过载 
                  <div style={{display:'flex',marginLeft: '0.1rem'}}>
                  <div  className={outInStockBarData.reducerAC?'yellowR':'graysR'}><div className={outInStockBarData.reducerAC?'yellowRN':'graysRN'}></div></div>
                  </div>
                </div>
                {/* <div style={{display:'flex',padding:'0.1rem 0',justifyContent: 'flex-end'}}>供水水泵电流过载
                  <div style={{display:'flex',marginLeft: '0.1rem'}}>
                  <div  className={outInStockBarData.waterAC?'yellowR':'graysR'}><div className={outInStockBarData.waterAC?'yellowRN':'graysRN'}></div></div>
                  </div>
                </div> */}
                {/* <div style={{display:'flex',padding:'0.1rem 0',justifyContent: 'flex-end'}}>供水水泵电流过载
                  <div style={{display:'flex'}}>
                  <div  className={outInStockBarData.waterAC?'yellowR':'graysR'}><div className={outInStockBarData.waterAC?'yellowRN':'graysRN'}></div></div>
                  </div>
                </div> */}
              </div>
              </div>
            </div>
            <div>
              
              <span style={{fontSize:'0.18rem',fontWeight:'900'}}>片冰机</span>
            
              <div style={{display:'flex',marginTop: '0.04rem'}}>
                
              <div style={{marginRight: '0.3rem'}}>
              <div style={{display:'flex',padding:'0.1rem 0',justifyContent: 'flex-end'}}>运行/停止{outInStockBarLists.equSwitch==1?'（运行）':'（停止）'}
                  <div style={{display:'flex',marginLeft: '0.1rem'}}>
                    <div  className={outInStockBarLists.equSwitch==1?'greenR':(outInStockBarLists.equSwitch==0?'redR':'grayR')}>
                      <div className={outInStockBarLists.equSwitch==1?'greenRN':(outInStockBarLists.equSwitch==0?'redRN':'grayRN')}></div>
                    </div>
                    
                    
                  </div>
                  
                </div>

                <div style={{display:'flex',padding:'0.1rem 0',justifyContent: 'flex-end'}}>系统正常 
                  <div style={{display:'flex',marginLeft: '0.1rem'}}>
                    <div  className={outInStockBarLists.workingMode==1?'greenR':'graysR'}>
                      <div className={outInStockBarLists.workingMode==1?'greenRN':'graysRN'}></div>
                    </div>
                    
                  </div>
                </div>
                
                <div style={{display:'flex',padding:'0.1rem 0',justifyContent: 'flex-end'}}>系统故障 
                  <div style={{display:'flex',marginLeft: '0.1rem'}}>
                    <div  className={outInStockBarLists.alarmInfo?'graysR':'yellowR'}>
                      <div className={outInStockBarLists.alarmInfo?'graysRN':'yellowRN'}></div>
                    </div>
                    
                  </div>
                  
                </div>

                <div style={{display:'flex',padding:'0.1rem 0',justifyContent: 'flex-end'}}>系统电源故障 
                  <div style={{display:'flex',marginLeft: '0.1rem'}}>
                  <div  className={outInStockBarDatas.powerStatus?'yellowR':'graysR'}><div className={outInStockBarDatas.powerStatus?'yellowRN':'graysRN'}></div></div>
                  
                  </div>
                </div>

                
                
                
              </div>
              <div>
              <div style={{display:'flex',padding:'0.1rem 0',justifyContent: 'flex-end'}}>压缩机内部过热 
                  <div style={{display:'flex',marginLeft: '0.1rem'}}>
                    <div  className={outInStockBarDatas.compressorIn?'yellowR':'graysR'}>
                      <div className={outInStockBarDatas.compressorIn?'yellowRN':'graysRN'}></div>
                    </div>
                    
                  </div>
                </div>

                <div style={{display:'flex',padding:'0.1rem 0',justifyContent: 'flex-end'}}>
                  <div>压缩机电流过载 </div>
                  <div style={{display:'flex',marginLeft: '0.1rem'}}>
                    <div  className={outInStockBarDatas.compressorAC==1?'yellowR':'graysR'}>
                      <div className={outInStockBarDatas.compressorAC==1?'yellowRN':'graysRN'}></div>
                    </div>
                    
                  </div>
                  
                </div>

                <div style={{display:'flex',padding:'0.1rem 0',justifyContent: 'flex-end'}}>供水水泵电流过载
                  <div style={{display:'flex',marginLeft: '0.1rem'}}>
                  <div  className={outInStockBarDatas.waterAC?'yellowR':'graysR'}><div className={outInStockBarDatas.waterAC?'yellowRN':'graysRN'}></div></div>
                  </div>
                </div>
                <div style={{display:'flex',padding:'0.1rem 0',justifyContent: 'flex-end'}}>冰库冰满 
                  <div style={{display:'flex',marginLeft: '0.1rem'}}>
                    <div  className={outInStockBarDatas.iceFull?'greenR':'graysR'}>
                      <div className={outInStockBarDatas.iceFull?'greenRN':'graysRN'}></div>
                    </div>
                    
                  </div>
                </div>

                {/* <div style={{display:'flex',padding:'0.1rem 0',justifyContent: 'flex-end'}}>减速机电流过载 
                  <div style={{display:'flex'}}>
                  <div  className={outInStockBarData.reducerAC?'yellowR':'graysR'}><div className={outInStockBarData.reducerAC?'yellowRN':'graysRN'}></div></div>
                  </div>
                </div>
                
                <div style={{display:'flex',padding:'0.1rem 0',justifyContent: 'flex-end'}}>供水水泵电流过载
                  <div style={{display:'flex'}}>
                  <div  className={outInStockBarData.waterAC?'yellowR':'graysR'}><div className={outInStockBarData.waterAC?'yellowRN':'graysRN'}></div></div>
                  </div>
                </div> */}
              </div>
              </div>
            </div>
            {/* <div className='greenR'><div className='greenRN'></div></div>
            <div className='yellowR'><div className='yellowRN'></div></div>
            <div className='redR'><div className='redRN'></div></div>
            <div className='grayR'><div className='grayRN'></div></div>
            <div className='graysR'><div className='graysRN'></div></div> */}
         
            {/* <LineChart outInStockBarData={outInStockBarData} /> */}
          </div>
        </div>
        {/* <div className="main-box">
          <div className="main-box-header">
            <div className="header-font">电量监控</div>
          </div>
          <div className="main-box-contain">
           
            <MeterChart meterData={meterData} />
          </div>
        </div> */}
        {/* 电量监控轮播表格 */}
      </div>
      {/* ---------- 右 ---------- */}
      <div className="main main-right">
      <div className="main-box">
          <div className="main-box-header">
            <div className="header-font">合格率趋势</div>
           
          
        </div>
        <div className="main-box-contain">
      
            <BarChartBaseValue trendData={passRateTrendData} />
          </div>
        </div>
        {/* <div className="main-box">
          <div className="main-box-header">
            <div className="header-font">库存数量趋势</div>
          </div>
          <div className="main-box-contain">
            
            <BarChartBaseValue trendData={stockTrendBarData} />
          </div>
        </div> */}
        {/* box */}
        <div className="main-box">
          <div className="main-box-header">
            <div className="header-font">加工鱼类占比</div>
          </div>
          <div className="main-box-contain">
            {/* chart */}
            <PieChartProportion proporData={proporData} />
          </div>
        </div>
        <div className="main-box" style={{height:'26.6%',overflow: 'hidden'}}>
          <div className="main-box-header">
            <div className="header-font">异常预警信息</div>
          </div>
          <div className="main-box-flex-contain" style={{marginTop:'0.1rem'}}>
            <InfiniteScroll data={averDatas} />
               
          </div>
        </div>
        {separatorMonitor.length!=0?
        <div style={{marginTop:'0.1rem'}}>
          <div style={{color:'#bed0db' ,fontSize:'0.12rem',fontWeight:'bold',marginTop:'0.05rem'}}>
          分选机当前数据：
          </div>


          <div  style={{ display: 'flex', color:'#bed0db' ,fontSize:'0.12rem',marginTop:'0.14rem',justifyContent:'space-between',fontWeight:'bold'}}>
            <div>总数量 {separatorMonitor[0].value[0].weight} 千克</div>
            <div>合格数量 {separatorMonitor[0].value[0].output} 千克</div>
            <div> 合格率 {(separatorMonitor[0].value[0].output/separatorMonitor[0].value[0].weight*100).toFixed(2)}%</div>
          
          {/* <div style={{marginRight:'0.1rem'}}>{separatorMonitor[0].value[0].category}读数（kg）：{separatorMonitor[0].value[0].value||0}</div> */}
        
         
       </div>


        </div>
        :<div></div>}
        
       
      </div>
    </div>
  );
}
